<script setup>
import {defineProps} from 'vue'
// 导入修改为
import {deng_ji} from "@/activity/xiu_wei/deng_ji.js"
// 导入用户信息 使用 pinia 保证线程安全
import {userStatus} from "@/pinia/userStatus"

const props = defineProps(['changRouter'])

const user = userStatus()
const user_info = user.load_user_info

user_info.init_attribute()

// 增加灵气的定时任务
let ling_zen;

function add_ling_check() {
  ling_zen = setInterval(() => {
    user.add_user_resource()
  }, 5000)
}

add_ling_check();

function changeView(view) {
  props.changRouter(view)
}

function changeFuBenView(view) {
  props.changRouter(view)
}

function tu_po() {
  if (user.tu_po()) {
    add_ling_check();
  }
}
</script>

<template>
  <div class="center_class">
    <n-divider>修炼</n-divider>
    <div class="ri_li">
      <n-gradient-text :gradient="{from: 'rgb(85, 85, 85)', to: 'rgb(170, 170, 170)' }">
        公元 {{ user_info.init_day.getFullYear() }} 年 {{ user_info.init_day.getMonth() + 1 }} 月
        {{ user_info.init_day.getDate() }} 日
      </n-gradient-text>
    </div>
    <div class="g-container">
      <div class="g-number" @click="tu_po()"> {{
          user_info.ling_li
        }}
      </div>
      <div class="g-contrast">
        <div class="g-circle" @click="tu_po()"></div>
        <ul class="g-bubbles" v-if="!user.add_ling_check()">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <div class="xiu_wei">
      <div class="user_info">
        <n-list clickable :show-divider="false">
          <n-list-item @click="changeView('ren_wu_bei_bao')">
            <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 背包</n-gradient-text>
          </n-list-item>
          <n-list-item @click="changeView('ren_wu_shu_xing')">
            <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 属性</n-gradient-text>
          </n-list-item>
          <n-list-item></n-list-item>
          <n-list-item></n-list-item>
          <n-list-item></n-list-item>
          <n-list-item></n-list-item>
          <n-list-item></n-list-item>
          <n-list-item></n-list-item>
          <n-list-item></n-list-item>
          <n-list-item></n-list-item>
          <n-list-item></n-list-item>
          <n-list-item></n-list-item>
          <n-list-item></n-list-item>
          <n-list-item></n-list-item>
          <n-list-item></n-list-item>
          <n-list-item>
            <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)">突破所需： {{
                user.tu_po_xu_yao()
              }}
            </n-gradient-text>
          </n-list-item>
          <n-list-item>
            <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)">
              寿元：{{ user_info.use_shou_ming }}/ {{ user_info.shou_ming }}
            </n-gradient-text>
          </n-list-item>
          <n-list-item>
            <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)">小阶： {{
                user_info.xiu_xi < deng_ji[user_info.xiu_da].xi_fen.length ? deng_ji[user_info.xiu_da].xi_fen[user_info.xiu_xi].name : "巅峰"
              }}
            </n-gradient-text>
          </n-list-item>
          <n-list-item>
            <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)">大境界:
              {{ deng_ji[user_info.xiu_da].name }}
            </n-gradient-text>
          </n-list-item>
        </n-list>
      </div>
    </div>
    <div class="fu_ben">
      <n-list clickable :show-divider="false">
        <n-list-item @click="changeFuBenView('zong_men')">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)">
            宗门
          </n-gradient-text>
        </n-list-item>
        <n-list-item @click="changeFuBenView('fu_ben_tan_suo')">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)">
            试炼
          </n-gradient-text>
        </n-list-item>
        <n-list-item @click="changeFuBenView('da_shi_jie')">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)">
            大世界
          </n-gradient-text>
        </n-list-item>
      </n-list>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.n-list {
  background-color: inherit !important;
  user-select: none;
}

.center_class {
  height: 100%;
  /* 设置绝对定位布局 */
  position: relative;
}

.ri_li {
  /* 子元素绝对定位 */
  position: absolute;
  /* 放在父元素的最下面 */
  right: 10px;
  top: 60px;
}

.xiu_wei {
  /* 子元素绝对定位 */
  position: absolute;
  /* 放在父元素的最下面 */
  left: 15px;
  bottom: 0;
}

.fu_ben {
  /* 子元素绝对定位 */
  position: absolute;
  /* 放在父元素的最下面 */
  right: 15px;
  bottom: 0;
}

.g-number {
  position: absolute;
  width: 300px;
  top: 27%;
  text-align: center;
  font-size: 32px;
  z-index: 10;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

.g-container {
  top: 20px;
  position: relative;
  width: 300px;
  height: 400px;
  margin: auto;

}

.g-contrast {
  filter: contrast(10) hue-rotate(0);
  width: 300px;
  height: 400px;
  //background-color: #000;
  overflow: hidden;
  animation: hueRotate 10s infinite linear;
}

.g-circle {
  position: relative;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  filter: blur(8px);

  &::after {
    content: "";
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0);
    width: 200px;
    height: 200px;
    background-color: #00ff6f;
    border-radius: 42% 38% 62% 49% / 45%;
    animation: rotate 10s infinite linear;
  }

  &::before {
    content: "";
    position: absolute;
    width: 176px;
    height: 176px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    //background-color: #000;
    z-index: 10;
    cursor: pointer;
    user-select: none;
  }
}

.g-bubbles {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 80px;
  height: 40px;
  transform: translate(-50%, 0);
  //border-radius: 80px;
  //background-color: #00ff6f;
  filter: blur(5px);
  list-style: none;
}

.g-container {
  li {
    position: absolute;
    border-radius: 50%;
    background: #00ff6f;
  }

  @for $i from 0 through 15 {
    li:nth-child(#{$i}) {
      $width: 15 + random(15) + px;
      left: 15 + random(70) + px;
      top: 50%;
      transform: translate(-50%, -50%);
      width: $width;
      height: $width;
      animation: moveToTop #{random(6) + 3}s ease-in-out -#{calc(random(5000)/1000)}s infinite;
    }
  }

  @keyframes rotate {
    50% {
      border-radius: 45% / 42% 38% 58% 49%;
    }
    100% {
      transform: translate(-50%, -50%) rotate(720deg);
    }
  }

  @keyframes moveToTop {
    90% {
      opacity: 1;
    }
    100% {
      opacity: .1;
      transform: translate(-50%, -180px);
    }
  }

  @keyframes hueRotate {
    100% {
      filter: contrast(15) hue-rotate(360deg);
    }
  }

}
</style>
